<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
  <style>
    .box {
      width: 20px;
      height: 20px;
      background-color: red;
    }
  </style>
</head>
<body>

<div class="box">我是文字的内容</div>
<p id=" nav">这是一个导航栏</p>
<ul class="nav">
  <li>123</li>
  <li>456</li>
  <li>789</li>
</ul>
<script>
  //1.获取元素
  const box = document.querySelector('.box')
  //2.修改元素内容
  box.innerText = '我是一个盒子'
  //输出元素内容
  console.log(box)
  // //获取匹配的第一个元素
  // const box = document.querySelector('div')
  // console.log('box')
  // const nav =document.querySelector('#nav')
  // console.log('nav')
  // //获取第一个ul的小li
  // const li  =document.querySelector('ul li:first-child')
  // console.log(li)
  // //选择ul的所有小li
  // const lis = document.querySelectorAll('ul li')
  // console.log(lis)
  // //获取元素
  // const  lies = document.querySelectorAll('.nav li')
  // //console.log(lies)
  // for (let i = 0; i < lies.length; i++) {
  //   console.log(lies[i])//每一个小li对象
  // }

</script>
</body>
</html>
